<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/animate.min.css">
    <style>
        table {
            background: #999;
        }

        tr td {
            padding: 20px;
            border: 1px solid #ddd;
        }

        ul {
            display: flex;
            width: 50%;
            list-style: none;
            background: pink;
        }

        li {
            flex: 1;
            padding: 10px;
        }

        .zoom-enter-active {
            animation: zoomInDown 0.8s;
        }

        .zoom-leave-active {
            animation: zoomOutDown 0.8s;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <hr>
        <my-head></my-head>
        <hr>
        <div v-if="false">
            <mytable v-if="flag" :cars="cars"></mytable>
            <mylist v-else :cars="cars"></mylist>
            <button @click="flag=true">表格展示</button>
            <button @click="flag=false">列表展示</button>
        </div>

        <div>
            <select v-model="cptname">
                <option value="mytable">表格展示</option>
                <option value="mylist">列表展示</option>
            </select>
        </div>
        <div>

            <transition name="zoom" mode="out-in">
                <keep-alive>
                    <component :is="cptname" :cars="cars"></component>
                </keep-alive>
            </transition>

        </div>

    </div>

    <template id="myhead">
        <div>
            <h2>myhead-----动态组件</h2>
        </div>
    </template>

    <template id="mytable">
        <div>
            <h2>表格展示</h2>
            <table>
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>品牌</td>
                        <td>型号</td>
                        <td>颜色</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(l,key,i) in cars" :key="i">
                        <td>{{i+1}}</td>
                        <td>{{l.brand}}</td>
                        <td>{{l.model}}</td>
                        <td>{{l.color}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>

    <template id="mylist">
        <div>
            <h2>列表展示</h2>
            <ul>
                <li v-for="(l,key,i) in cars" :key="i">
                    <p>序号：{{i+1}}</p>
                    <p>品牌：{{l.brand}}</p>
                    <p>型号：{{l.model}}</p>
                    <p>颜色：{{l.color}}</p>
                </li>
            </ul>
        </div>
    </template>





    <script>
        // 空的Vue实例当做 事件总线  (emit on once)
        const bus = new Vue()


        Vue.component('myHead', {
            template: '#myhead'
        })

        var cars = {
            car01: { brand: 'Ford', model: 'Mustang', color: 'red' },
            car02: { brand: 'Fiat', model: '500', color: 'white' },
            car03: { brand: 'Vovo', model: 'xc90', color: 'black' }

        }

        Vue.component('mytable', {
            template: '#mytable',
            props: ['cars'],
            mounted() {
                console.log('mytable is init');
            },
            destroyed() {
                console.log('destroyed - table');
            },
            activated() {
                console.log("组件激活了--- activated")
            },
            deactivated() {
                console.log("组件失活了--- deactivated")
            },
        })

        Vue.component('mylist', {
            template: '#mylist',
            props: ['cars']
        })

        const vm = new Vue({
            el: "#app",
            data: {
                title: "动态组件切换 -  component",
                cars,
                flag: true,
                cptname: 'mytable'
            },
            mounted() {
                document.getElementsByTagName('title')[0].innerHTML = this.title;
            }
        })
    </script>
    <!-- 
    component 官方组件
    is 属性   表示当前显示的组件 组件名称
    keep-alive  (记录滑动的高度)   失活的组件将会被缓存！   下一次失活组件重新激活的时候 会直接调用缓存数据  性能优化

    activated   激活
    deactivated 失活  
    
    transition 过渡组件 

    组件切换
    1. v-if
    2. v-show 
    3. component
    4. 路由 route 
    -->
</body>

</html>